<template>
  <div class="app-container">
    <el-page-header @back="$router.back()"/>
    <br>
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="头像" prop="0">
        <el-avatar :src="form['avatarUrl'] "/>
      </el-form-item>
      <el-form-item label="用户名" prop="0">
        <span v-if="!isEdit">{{ form['nickName'] }}</span>
        <el-input v-else v-model="form['nickName']" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="VIP等级" prop="3">
        <span v-if="!isEdit">{{ VIPFilter(form['level']) }}</span>
        <el-input v-else v-model="form['level']" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="VIP开始时间" prop="4">
        <span v-if="!isEdit">{{ form['startTime'] }}</span>
        <el-input v-else v-model="form['startTime']" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="VIP结束时间" prop="5">
        <span v-if="!isEdit">{{ form['endTime'] }}</span>
        <el-input v-else v-model="form['endTime']" style="width: 200px;"/>
      </el-form-item>
      <el-form-item>
        <el-button v-if="isEdit" @click="modifyUserInfo">保存</el-button>
        <el-button v-if="!isEdit" @click="isEdit=!isEdit">修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getUserDetail, modifyUserInfo } from '@/api/user'

export default {
  data() {
    return {
      form: {},
      isEdit: false
    }
  },
  computed: {},
  created() {
    this.id = this.$route.params.id || 0
    this.getUserDetail()
  },
  methods: {
    async modifyUserInfo() {
      const res = await modifyUserInfo(this.form)
      console.log(res)
      this.isEdit=false
      if (res.code !== 1) return this.$message.error(res.message)
      this.$message.success(res.message)
    },
    async getUserDetail() {
      const res = await getUserDetail({ id: this.id })
      console.log(res)
      this.form = res.data
    },
    VIPFilter(num) {
      return {
        1: '一级VIP',
        2: '二级VIP',
        3: '三级VIP'
      }[num]
    }
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

</style>

